import {PlusOutlined} from '@ant-design/icons';
import {Button, message, Drawer, FormInstance, Popconfirm, Modal, Image} from 'antd';
import React, {useState, useRef} from 'react';
import {PageContainer, FooterToolbar} from '@ant-design/pro-layout';
import type {ProColumns, ActionType} from '@ant-design/pro-table';
import ProTable from '@ant-design/pro-table';
import {
  ModalForm,
  ProFormText,
  ProFormRadio,
  ProFormSelect,
  ProFormUploadButton,
  ProFormDateRangePicker,
} from '@ant-design/pro-form';
import ProDescriptions, {ProDescriptionsItemProps} from '@ant-design/pro-descriptions';
import {removeData, dataList, addData, updateData, loadData} from './service';
import type {CertificateBody, CertificateListItem, CertificateListPagination} from './data';
import {UploadFile} from 'antd/lib/upload/interface';

/**
 * 添加节点
 *
 * @param fields
 * @param mode
 */

const handleAdd = async (fields: CertificateBody, mode: boolean) => {
  const hide = message.loading(mode ? '正在保存' : '正在添加');

  try {
    mode ? await updateData({...fields}) : await addData({...fields});
    hide();
    message.success(mode ? '保存成功' : '添加成功');
    return true;
  } catch (error) {
    // hide();
    // message.error(mode ? '保存失败请重试' : '添加失败请重试');
    return false;
  }
};
/**
 * 删除节点
 *
 * @param selectedRows
 */

const handleRemove = async (selectedRows: CertificateListItem[]) => {
  const hide = message.loading('正在删除');
  if (!selectedRows) return true;

  try {
    await removeData(selectedRows.map((row) => row.certificateId));
    hide();
    message.success('删除成功，即将刷新');
    return true;
  } catch (error) {
    hide();
    message.error('删除失败，请重试');
    return false;
  }
};

const CertificatesPage: React.FC = () => {
  const [createModalVisible, handleModalVisible] = useState<boolean>(false);
  const [showDetail, setShowDetail] = useState<boolean>(false);
  const actionRef = useRef<ActionType>();
  const formRef = useRef<FormInstance>();
  const [currentRow, setCurrentRow] = useState<CertificateListItem>();
  const [selectedRowsState, setSelectedRows] = useState<CertificateListItem[]>([]);

  const columns: ProColumns<CertificateListItem>[] = [
    {
      title: '序号',
      dataIndex: 'index',
      valueType: 'indexBorder',
      render: (dom, entity, index) => {
        return (
          <span>
            {index +
              1 +
              ((actionRef?.current?.pageInfo?.current || 1) - 1) *
              (actionRef?.current?.pageInfo?.pageSize || 5)}
          </span>
        );
      },
    },
    {
      title: '证件名',
      dataIndex: 'certificateName',
    },
    {
      title: '证件类型',
      dataIndex: 'certificateType',
      search: false,
      valueEnum: {
        0: {
          text: '普通证件',
        },
      },
    },
    {
      title: '有效期开始时间',
      dataIndex: 'startTime',
      search: false,
    },
    {
      title: '有效期结束时间',
      dataIndex: 'endTime',
      search: false,
    },
    {
      title: '证件照片',
      dataIndex: 'photo',
      search: false,
      render: (_, record) => <Image width={60} alt={record.certificateName} src={record.photo}/>,
    },
    {
      title: '是否有效',
      dataIndex: 'status',
      search: false,
      valueEnum: {
        0: {
          text: '是',
          status: 'Success',
        },
        1: {
          text: '否',
          status: 'Error',
        },
      },
    },
    {
      title: '创建时间',
      sorter: true,
      dataIndex: 'createTime',
      valueType: 'dateTime',
      search: false,
      defaultSortOrder: 'descend',
    },
    {
      title: '操作',
      dataIndex: 'option',
      valueType: 'option',
      hideInDescriptions: true,
      render: (_, record) => [
        <a
          key="view"
          onClick={() => {
            setCurrentRow(record);
            setShowDetail(true);
          }}
        >
          查看
        </a>,
        <a
          key="edit"
          onClick={() => {
            formRef.current?.resetFields();
            console.log(record);
            setCurrentRow(record);
            setEditMode(true);
            handleModalVisible(true);
          }}
        >
          编辑
        </a>,

        <Popconfirm
          key="delete"
          okButtonProps={{danger: true}}
          title={`确认删除证件：${record.certificateName}?`}
          onConfirm={async () => {
            setCurrentRow(record);
            await handleRemove([record]);
            actionRef.current?.reloadAndRest?.();
          }}
          okText="删除"
          cancelText="取消"
        >
          <a href="#"> 删除 </a>
        </Popconfirm>,
      ],
    },
  ];

  const [editMode, setEditMode] = useState<boolean>(false);
  const [previewData, setPreviewData] = useState({
    visible: false,
    image: '',
    title: '',
  });

  const uploadProps = {
    headers: {
      Authorization: `Bearer ${localStorage.getItem('token')}`,
    },
    multiple: false,
    // @ts-ignore
    onChange({file}) {
      if (file.status === 'done' && file.response.code !== 200) {
        file.status = 'error';
      }
    },
    onPreview: async (file: UploadFile) => {
      setPreviewData({
        image: file?.response?.data?.url || file.url,
        visible: true,
        title: '查看图片',
      });
    },
    name: 'file',
    listType: 'picture-card',
    max: 1,
  };
  const submitCheckFile = (
    values: CertificateBody,
    fileName: string,
    dataName: string,
    msg: string,
  ) => {
    let file = values[fileName][0];
    if (file.status !== 'done' || (file?.response && file?.response?.code !== 200)) {
      throw new Error(msg);
    }
    values[dataName] = file?.response?.data?.url || file.url;
  };
  return (
    <PageContainer waterMarkProps={{content: ''}}>
      <ProTable<CertificateListItem, CertificateListPagination>
        headerTitle="证件列表"
        actionRef={actionRef}
        rowKey="certificateId"
        search={{
          labelWidth: 120,
        }}
        toolBarRender={() => [
          <Button
            type="primary"
            key="primary"
            onClick={() => {
              setEditMode(false);
              handleModalVisible(true);
            }}
          >
            <PlusOutlined/> 新建
          </Button>,
        ]}
        request={dataList}
        columns={columns}
        rowSelection={{
          onChange: (_, selectedRows) => {
            setSelectedRows(selectedRows);
          },
        }}
      />
      {selectedRowsState?.length > 0 && (
        <FooterToolbar
          extra={
            <div>
              已选择{' '}
              <a
                style={{
                  fontWeight: 600,
                }}
              >
                {selectedRowsState.length}
              </a>{' '}
              个证件
            </div>
          }
        >
          <Popconfirm
            key="delete"
            title={`确认删除选中的${selectedRowsState.length}个证件?`}
            okButtonProps={{danger: true}}
            onConfirm={async () => {
              await handleRemove(selectedRowsState);
              setSelectedRows([]);
              actionRef.current?.reloadAndRest?.();
            }}
            okText="删除"
            cancelText="取消"
          >
            <Button danger>批量删除</Button>
          </Popconfirm>
          {/*<Button type="primary">批量审批</Button>*/}
        </FooterToolbar>
      )}
      <ModalForm<CertificateBody>
        title={currentRow?.certificateId || 0 > 0 ? '编辑证件' : '新建证件'}
        width="500px"
        formRef={formRef}
        visible={createModalVisible}
        modalProps={{maskClosable: false, destroyOnClose: true}}
        onVisibleChange={(visible) => {
          if (!visible) {
            setCurrentRow(undefined);
          }
          handleModalVisible(visible);
        }}
        onFinish={async (value) => {
          console.log(value);
          try {
            submitCheckFile(value, 'photoFile', 'photo', '营业执照未上传');
          } catch ({message: msg}) {
            // @ts-ignore
            message.error(msg);
            return false;
          }
          value.startTime = value.dateRange[0];
          value.endTime = value.dateRange[1];
          const success = await handleAdd(value, editMode);
          if (success) {
            handleModalVisible(false);
            if (actionRef.current) {
              actionRef.current?.reload();
            }
          }
        }}
        request={(params: CertificateBody) => {
          console.log(params);
          if (params.certificateId > 0) {
            return loadData(params).then(({data}) => {
              data.dateRange = [data.startTime, data.endTime];
              data.photoFile = [{
                url: data.photo,
                name: '证书图片',
                status: 'done'
              }];
              return data;
            });
          } else {
            return new Promise<CertificateBody>((resolve) => {
              resolve({
                certificateId: 0,
                certificateName: '',
                certificateType: '0',
                startTime: '',
                endTime: '',
                dateRange: [],
                photo: '',
                status: '0',
                createTime: '',
              });
            });
          }
        }}
        params={{...currentRow}}
      >
        <ProFormText hidden name="certificateId"/>
        <ProFormText
          rules={[
            {
              required: true,
              message: '证件名称称为必填项',
            },
          ]}
          label={'证件名称'}
          name="certificateName"
        />
        <ProFormSelect
          name="certificateType"
          required
          label="证件类型"
          options={[
            {
              label: '普通证件',
              value: '0',
            },
          ]}
        />
        <ProFormDateRangePicker required name="dateRange" label="日期"/>

        <ProFormUploadButton
          name="photoFile"
          label="证件图片"
          rules={[{required: true}]}
          max={1}
          // @ts-ignore
          fieldProps={{...uploadProps}}
          action="/v2/enterprise/upload/certificate"
        />
        <ProFormRadio.Group
          name="status"
          label="是否有效"
          options={[
            {
              label: '是',
              value: '0',
            },
            {
              label: '否',
              value: '1',
            },
          ]}
        />
      </ModalForm>

      <Image
        width={200}
        style={{display: 'none'}}
        src={previewData.image}
        preview={{
          visible: previewData.visible,
          src: previewData.image,
          onVisibleChange: (value) => {
            setPreviewData({image: previewData.image, title: '', visible: value});
          },
        }}
      />
      {/*<Modal*/}
      {/*  visible={previewData.visible}*/}
      {/*  title={previewData.title}*/}
      {/*  footer={null}*/}
      {/*  onCancel={() => {*/}
      {/*    setPreviewData({image: '', title: '', visible: false});*/}
      {/*  }}*/}
      {/*>*/}
      {/*  <img alt="example" style={{width: '100%'}} src={previewData.image}/>*/}
      {/*</Modal>*/}
      <Drawer
        width={800}
        visible={showDetail}
        onClose={() => {
          setCurrentRow(undefined);
          setShowDetail(false);
        }}
        closable={false}
      >
        {currentRow?.certificateId && (
          <ProDescriptions<CertificateBody>
            column={1}
            bordered={true}
            title={'证照详情'}
            request={loadData}
            params={currentRow}
            columns={columns as ProDescriptionsItemProps<CertificateBody>[]}
          />
        )}
      </Drawer>
    </PageContainer>
  );
};

export default CertificatesPage;
